<style>
    .c-content-contact-1-gmap {
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        width: 100%;
    }
    .c-content-contact-1>.row .c-body {
        position: relative;
        z-index: 100;
        background: #fff;
        margin: 40px 0;
        padding: 60px 40px;
    }
    .c-content-contact-1>.row .c-body>.c-section {
        margin-bottom: 15px;
        text-align: left;
    }
    .c-content-contact-1>.row .c-body>.c-section>h3 {
        font-size: 30px;
        color: #3f444a;
        font-weight: 700;
        margin: 0 0 30px 0;
        text-transform: uppercase;
        padding-left: 2px!important;
        padding-right: 2px!important;
    }
    .c-content-label {
        padding: 4px 10px 2px 10px;
        color: #fff;
        background: #d23b32;
        font-weight: 400;
        font-size: 16px;
        display: inline-block;
    }
    .c-content-label.c-font-uppercase {
        font-size: 14px;
    }
    .c-content-contact-1>.row .c-body>.c-section>p {
        font-size: 16px;
        line-height: 24px;
        color: #7f8c97;
        font-weight: 300;
    }
    .right-content{
        min-height: 630px;
    }
    @media (max-width: 991px){
        .c-content-contact-1>.row>div {
            width: 100%;
        }

        .c-content-contact-1>.row>div .c-body {
            position: static;
            display: block;
            padding: 30px 20px 10px 20px;
            background: #fafafa;
            margin: 0;
            text-align: left;
        }

        .c-content-contact-1-gmap {
            display: block;
            position: static;
            width: 100%;
            height: 300px!important;
        }
    }
</style>
<div class="c-content-box c-size-md c-bg-img-top c-no-padding c-pos-relative" style="margin-top:20px;margin-bottom:20px;">
    <div class="containers">
        <div class="c-content-contact-1 c-opt-1">
            <div class="row" data-auto-height=".c-height">
                <div class="col-sm-8 c-desktop"></div>
                <div class="col-sm-4">
                    <div class="c-body" style="margin-left:-15px;margin-right:-15px;">
                        <div class="c-section">
                            <h3><f:format.nl2br>{field.name}</f:format.nl2br></h3>
                        </div>
                        <div class="c-section">
                            <div class="c-content-label c-font-uppercase c-font-bold c-theme-bg">Address</div>
                            <p><f:format.nl2br>{field.address}</f:format.nl2br></p>
                        </div>
                        <div class="c-section">
                            <div class="c-content-label c-font-uppercase c-font-bold c-theme-bg">Tel</div>
                            <p><f:format.nl2br>{field.telephone}</f:format.nl2br></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="gmapbg" class="c-content-contact-1-gmap" style="max-height: 615px;"></div>
    <div id="gmapaddress" class="hide"><f:format.nl2br>{field.address}</f:format.nl2br></div>
</div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ydzxcQpT4ofcl02srEs1xf0k"></script>
<script type="text/javascript">
    var map = new BMap.Map("gmapbg"), myGeo = new BMap.Geocoder();
    myGeo.getPoint($('#gmapaddress').text(), function (point) {
        if (point) {
            map.centerAndZoom(point, 13);
            map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 添加比例尺控件
            map.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件
            map.disableScrollWheelZoom();
            var marker = new BMap.Marker(point, {icon: new BMap.Icon("typo3conf/ext/website/Resources/Public/Images/mapicon.png", new BMap.Size(30, 36))});  // 创建标注
            map.addOverlay(marker);
            addClickHandler("<f:format.nl2br>{field.name}</f:format.nl2br>", $('#gmapaddress').html(), marker);
        }
    });
    function addClickHandler(title, content, marker) {
        marker.addEventListener("click", function (e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, {width: 200, height: 100, title: title});  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
    }
</script>